<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    canvas {}
  </style>
</head>

<body>
  <img src="Snipaste_2019-12-27_10-20-31.jpg" alt="" id="img" onload="loadimage()">
  <canvas id="draw" onclick="drawBg()"></canvas>
  <canvas id="bg"></canvas>

  <script>
    let image = document.getElementById('img')

    let bg = document.getElementById('bg')
    let draw = document.getElementById('draw')

    let g = draw.getContext('2d')
    let bgCtx = bg.getContext('2d');

    function loadimage() {
      bg.width = image.clientWidth;
      bg.height = image.clientHeight

      draw.width = image.clientWidth;
      draw.height = image.clientHeight;


      g.drawImage(image, 0, 0)
    }

    function drawBg() {
      let image = g.getImageData(0, 0, draw.width, draw.height)
      // rotate(image.width, image.height, 4, image.data);
      // centerRo(image)
      bgCtx.putImageData(image, 0, 0)
    }


    function rotate(width, height, groupLength, mydata) {
      let data = [...mydata];
      let step = groupLength * width
      let len = data.length;
      let index = 0;

      for (let i = 0; i < width; i++) {
        for (let j = 0; j < height; j++) {
          for (let z = 0; z < groupLength; z++) {
            let id = len - step * (j + 1) + i * groupLength + z;
            mydata[index] = data[id]
            index++
          }
        }
      }
      return mydata;
    }

    function centerRo(img_data) {
      var i,
        i2,
        t,
        h = img_data.height,
        w = img_data.width,
        w_2 = w / 2;
      for (var dy = 0; dy < h; dy++) {
        for (var dx = 0; dx < w_2; dx++) {
          i = (dy << 2) * w + (dx << 2)
          i2 = ((dy + 1) << 2) * w - ((dx + 1) << 2)
          for (var p = 0; p < 4; p++) {
            t = img_data.data[i + p]
            img_data.data[i + p] = img_data.data[i2 + p]
            img_data.data[i2 + p] = t
          }
        }
      }
    }
  </script>
</body>

</html>